Resolves #5891 (also #5634, #5890, closed because the change was intentional, but it seems like the change is confusing for users.)

Changes

High level

• Defaults alpha to true again
• Defaults premultipliedAlpha to true to fix weird the weird blending issues (WebGL background & clear odd behaviour #5195, Semi-transparent objects in WebGL mode make the background behind them transparent #5451) that caused us to remove alpha before
  • Updates blend mode implementations and shaders to accommodate this format change

Notes

• As in WebGL blending doesn't always work with transparent textures #5854, WebGL MULTIPLY also multiplies the alpha channel instead of 2D mode, where it blends with white before multiplying.
• LIGHTEST and DARKEST unfortunately work less well with premultiplied alpha, as 2D mode takes the max/min of the un-premultiplied channel values. This is a downgrade from before
• SCREEN, REMOVE, and EXCLUSION handle semitransparency better now
• Unlike my initial thoughts in Default WebGL premultipliedAlpha to true? #5891, I did not end up setting gl.pixelStorei(gl.UNPACK_PREMULTIPLIED_ALPHA, true), because the other color inputs to shaders are unmultiplied. (If we choose to keep our shaders the same and instead change our color inputs to them, we would need to turn this setting on to match.)

Live test files

• Demo comparing 2D and WebGL using images with transparency: https://editor.p5js.org/davepagurek/sketches/Tb4TUHs6W
• Demo using colors with transparency: https://editor.p5js.org/davepagurek/sketches/ZPEGKszqE
• The same color demo in v1.5.0, to show the state it's in currently: https://editor.p5js.org/davepagurek/sketches/A0Wbouvtk

Screenshots of the change

Antialiasing on clear backgrounds

function setup() { createCanvas(400, 400, WEBGL); pixelDensity(2); setAttributes({ alpha: true, premultipliedAlpha: true }); noFill(); stroke(200, 200, 255); strokeWeight(1); } function draw() { // black w/ alpha zero background(0, 0, 0, 0); scale(4); box(); noLoop(); }	premultipliedAlpha: false	premultipliedAlpha: true

Blend modes on a clear background

In each screenshot, the left column is 2D mode, and the right column is WebGL mode.

Semitransparent white

Before	After

Semitransparent black

Before	After

PR Checklist

• npm run lint passes
• Inline documentation is included / updated
• Unit tests are included / updated